<template>
  <Teleport to="body">
    <Transition name="modal">
      <div v-if="show" class="popup">
        <div class="mask" @click="show = false"></div>
        <div class="container">
          <slot></slot>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup scoped>
import { ref, watch } from 'vue'

const props = defineProps({ show: Boolean })
const emit = defineEmits(['update:show'])

const show = ref()
watch(show, (val) => {
  emit('update:show', val)
})
watch(
  () => props.show,
  (val) => {
    show.value = val
  },
  { immediate: true }
)
</script>

<style lang="scss">
.popup {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.2s ease-out;
  .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    display: table;
    transition: opacity 0.2s ease-out;
  }
  .container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-top-left-radius: var(--zui-size-border-radius-regular);
    border-top-right-radius: var(--zui-size-border-radius-regular);
    overflow: auto;
    max-height: 90vh;
    /* ios */
    @supports (-webkit-touch-callout: none) {
      padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
      padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
    }

    background-color: #ffffff;
    transition: transform 0.2s ease-out;
  }
}
.modal-enter-from,
.modal-leave-to {
  .mask {
    opacity: 0;
  }
  .container {
    transform: translateY(100%);
  }
}
</style>
